<template>
  <div class="Classlistcp">
    <van-nav-bar v-if="showNav" title="分类" left-text="返回" left-arrow @click-left="back" />
    <div class="novel-box">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item v-for="(item, index) in novelTypeData" :key="index" :title="item.name"
          @click="switchType(item.id)" />
      </van-sidebar>

      <div class="noveltype">
        <div class="novel-item" v-for="(item, index) in novelList" :key="index">
          <h3 class="title">{{ item.title }}:</h3>
          <ul>
            <li :class="{ active: item.itemIndex === index1 }" v-for="(value, index1) in item.type" :key="index1"
              @click="switchCategory(item, index1)">{{ value.name }}</li>
          </ul>
        </div>
        <div class="novel-content" v-if="novelsData.length > 0">
          <div class="nov-item" v-for="(item, index) in  novelsData" :key="index" @click="linkToDetail(item.season_id)">
            <div class="item-img">
              <img v-lazy="item.vertical_cover" />
            </div>
            <div class="item-text">
              <h3 class="title">作品:{{ item.title }}</h3>
              <span class="author">作者:{{ item.author[0] }}|{{ item.author[1] }}</span>
              <span class="span-type">类型:{{ item.rd_tag }}</span>
              <span class="span-value">{{ item.is_finish == 0 ?
      "更新至" + item.last_short_title + "话" : '共' + item.total + "话完结" }}</span>
            </div>
          </div>
        </div>
        <div class="novel-content" v-if="novelsData.length===0">
          <van-empty image="search" description="暂无该漫画类型!" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import router from "@/router";
import { getNovelType, getNovelCategory } from "@/api/api";
import { novelList } from "@/js/data";
export default {
  name: "Classlistcp",
  data() {
    return {
      activeKey: 0,
      //左边漫画列表
      novelTypeData: [],
      //右边漫画类型列表
      novelList,
      //右边漫画下面数据
      novelsData: []
    };
  },
  props: {
    showNav: {
      type: Boolean,
      default: true
    }
  },
  created() {
    //获取漫画不同类型数据
    getNovelType()
      .then(res => {
        this.novelTypeData = res.data.data.styles;
        this.novelTypeData.unshift({
          name: "全部",
          id: -1
        });
        //获取漫画不同分类数据
        this.getComicTypeData(res.data.data.areas, 0);
        this.getComicTypeData(res.data.data.orders, 1);
        this.getComicTypeData(res.data.data.prices, 2);
        this.getComicTypeData(res.data.data.status, 3);
        this.novelList.map((item, index) => {
          if (index !== 1) {
            item.type.unshift({
              name: "全部",
              id: -1,
              isSelected: false
            });
          }
        });
      })
      .catch(err => {
        console.log(err);
      });
    this.updateNolves(-1, 0, -1, -1, -1);
  },
  methods: {
    back() {
      let path = this.$route.query.path;
      if (path.split("?")[0] == "/found") {
        this.$router.push(path);
      } else this.$router.back();
    },
    //切换左边不同类型漫画
    switchType(id) {
      this.updateNolves(id);
    },
    //切换右边漫画的不同种类
    switchCategory(item, index1) {
      if (item.itemIndex === index1) {
        return;
      }
      for (let i = 0; i < item.type.length; i++) {
        item.type[i].isSelected = false;
      }
      item.type[index1].isSelected = true;
      item.itemIndex = index1;
      this.updateNolves();
    },
    //切换更新下面漫画数据
    updateNolves(id) {
      let arr = [];
      this.novelList.map(item => {
        item.type.map(item => {
          if (item.isSelected) {
            arr.push(item.id);
          }
        });
      });
      getNovelCategory(id, arr[0], arr[1], arr[2], arr[3])
        .then(res => {
          this.novelsData = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取漫画不同分类数据
    getComicTypeData(type, index) {
      this.novelList[index].type = [];
      type.map(item => {
        this.novelList[index].type.push({
          name: item.name,
          id: item.id,
          isSelected: false
        });
      });
    },
    //获取漫画小说的id跳转到详情页
    linkToDetail(id) {
      console.log(id)
      let path = "/detail";
      this.$router.push({
        path,
        query: { comicId: id, path: this.$route.fullPath }
      });
    }
  },
  components: { router }
};
</script>

<style lang="scss" scoped>
.Classlistcp {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  ::v-deep .van-nav-bar__title {
    color: #333;
    font-size: 18px;
    font-weight: bold;
  }

  ::v-deep .van-nav-bar__text,
  ::v-deep .van-nav-bar .van-icon {
    color: #777;
    font-size: 14px;
  }

  ::v-deep .van-sidebar {
    height: 100vh;
  }

  ::v-deep .van-sidebar-item--select::before {
    background-color: #5c55ff;
    width: 2px;
    height: 30px;
  }

  //漫画不同类型样式
  .novel-box {
    display: flex;

    .noveltype {
      width: calc(100% - 80px - 20px);
      padding: 10px;

      .novel-item {
        margin-top: 5px;

        .title {
          width: 40px;
          font-size: 16px;
          color: #333;
          margin: 0;
        }

        ul {
          display: flex;
          flex-wrap: wrap;

          li {
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-size: 14px;
            color: #333;
            margin-right: 10px;
            margin-top: 5px;
            padding: 0 5px;

            &:last-child {
              margin-right: 0;
            }

            &.active {
              border: 1px solid #5c55ff;
              color: #5c55ff;
              border-radius: 4px;
            }
          }
        }
      }

      .novel-content {
        height: 100vh;
        overflow-y: auto;
        margin-top: 10px;
        border-top: 0.5px solid #5c55ff;

        .nov-item {
          display: flex;
          margin-bottom: 15px;
          background: #f1f1f1;
          border-radius: 4px;
          overflow: hidden;

          &:last-child {
            margin-bottom: 55px;
          }

          .item-img {
            width: 80px;
            height: 100px;
            background: #999;
            border-radius: 4px;
            margin-right: 10px;

            img {
              width: inherit;
              height: 100%;
            }

          }


          .item-text {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            color: #333;

            .title {
              margin: 0;
              font-size: 16px;
            }

            span {
              font-size: 13px;
            }
          }
        }
      }
    }
  }
}
</style>